<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22001010431-曹鹏</title>
    <link rel="stylesheet" href="./css/caopeng.css">
    <link rel="stylesheet" href="./iconfonts/fonts/iconfont.css">
    <link rel="stylesheet" href="./iconfonts/icon/fonts/iconfont.css">
    <link rel="stylesheet" href="./css/records.css">
    <link rel="stylesheet" href="./js/records.js">

</head>

<body>

    <header class="cao-nav">
        <div class="cao-content">
            <div class="cao-left">
                <div class="cao-logo">
                    <span class="iconfont icon-tengxunshipin"></span>
                    <span class="cao-ten">腾讯视频</span>
                </div>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">VIP会员</a></li>
                    <li><a href="#">电视剧</a></li>
                    <li><a href="#">电影</a></li>
                    <li><a href="#">综艺</a></li>
                    <li><a href="#">动漫</a></li>
                    <li><a href="#">少儿</a></li>
                    <li><a href="#" id="dropdownButton">全部v</a></li>
                </ul>
            </div>
       
            <div class="cao-dropdown-content" id="dropdownMenu">
                <div>
                    <strong>影视推荐：</strong>
                    <a href="#">首页</a>
                    <a href="#">VIP会员</a>
                    <a href="#">电视剧</a>
                    <a href="#">电影</a>
                    <a href="#">综艺</a>
                    <a href="#">动漫</a>
                    <a href="#">少儿</a>
                    <a href="#">短剧</a>
                </div>
                <div>
                    <strong>就好这口：</strong>
                    <a href="#">中视频</a>
                    <a href="#">知识</a>
                    <a href="#">学堂</a>
                </div>
                <div>
                    <strong>体育游戏：</strong>
                    <a href="#">NBA</a>
                    <a href="#">体育</a>
                    <a href="#">爱玩</a>
                    <a href="#">游戏</a>
                    <a href="#">传奇游戏库</a>
                    <a href="#">F1</a>
                    <a href="#">NFL</a>
                    <a href="#">WWE</a>
                </div>
                <div>
                    <strong>资讯前沿：</strong>
                    <a href="#">科技</a>
                    <a href="#">财经</a>
                    <a href="#">汽车</a>
                </div>
                <div>
                    <strong>乐享生活：</strong>
                    <a href="#">音乐</a>
                    <a href="#">艺术</a>
                    <a href="#">生活</a>
                    <a href="#">时尚</a>
                    <a href="#">健康</a>
                    <a href="#">育儿</a>
                </div>
            </div>
            <div class="cao-right">
                <div class="cao-search">
                    <form>
                        <input type="text" value="吞噬星空剧场版 血洛...">
                        <button type="submit" class="iconfont icon-sousuo" onclick="event.preventDefault(); doSearch();"></button>
                    </form>
                </div>
                <ul>
                    <li><a href="#" class="cao-VIP">
                            <p class="iconfont icon-vip1"></p>
                            <p>会员专区</p>
                        </a></li>
                    <li><a href="#">
                            <p class="iconfont icon-airudiantubiaohuizhi-zhuanqu_youxi"></p>
                            <p>游戏</p>
                        </a></li>
                    <li><a href="#">
                            <p class="iconfont icon-lishi"></p>
                            <p>历史</p>
                        </a></li>
                    <li><a href="#">
                            <p class="iconfont icon-video"></p>
                            <p>创作</p>
                        </a></li>
                    <li><a href="#">
                            <p class="iconfont icon-a-huaban1fuben10"></p>
                            <p>客户端</p>
                        </a></li>
                    <li><a href="#" data-modal-target="loginModal">
                            <img src="image/头像.png">
                        </a></li>
                </ul>
            </div>
        </div>
    </header>
    <article>
        <div class="cao-article">
            <aside>
                <div class="cao-user">
                    <div class="cao-userImage">
                        <img src="image/头像.png" alt="">
                    </div>
                    <div class="cao-userName">
                        <span>九厘米的雾</span>
                    </div>
                    <div class="cao-userVIPinfo">
                        <span>开通 VIP/SVIP 看大片</span>
                        <p>开通</p>
                    </div>
                </div>
                <div class="cao-option">
                    <ul>
                        <li class="cao-selected"><a href="#">观看历史</a></li>
                        <li><a href="#">加追</a></li>
                        <li><a href="#">收藏</a></li>
                        <li><a href="#">观看历史</a></li>
                    </ul>
                </div>
            </aside>
            <div class="cao-history">
                <div class="cao-hTitle">
                    <i></i>
                    <span>更早</span>
                </div>
                <div class="cao-hContent">
                    <a class="cao-modle">
                        <img src="image/3.png">
                        <p>永夜星河 第 22 集</p>
                        <span>观看至 99%</span>
                        <div class="cao-tips">
                            <div class="cao-first">独播</div>
                            <div class="cao-second">全 32 集</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </article>
    <footer>
        <div class="cao-line">
            <hr size="3px" color="#ff5c38">
        </div>
        <div class="cao-footer">
            <div class="cao-links1">
                <dl>
                    <dt>特色推荐</dt>
                    <dd><a href="#">自制推荐</a></dd>
                    <dd><a href="#">杀毒软件</a></dd>
                </dl>
            </div>
            <div class="cao-links2">
                <h4>软件下载</h4>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#iPhone">
                        <span class="iconfont icon-mobile"></span>
                        <p>手机版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#Windows">
                        <span class="iconfont icon-windows"></span>
                        <p>Windows 版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#Mac">
                        <span class="iconfont icon-mac"></span>
                        <p>Mac 版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#Pad">
                        <span class="iconfont icon-ipad1"></span>
                        <p>iPad 版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#TV">
                        <span class="iconfont icon-diannaoduan"></span>
                        <p>TV 版</p>
                    </a>
                </div>
            </div>
            <div class="cao-links3">
                <dl>
                    <dt>服务</dt>
                    <dd><a href="#">客服</a></dd>
                    <dd><a href="#">反馈</a></dd>
                    <dd><a href="#">侵权投诉</a></dd>
                    <dd><a href="#">免广告合作</a></dd>
                    <dd><a href="#">vip 采购</a></dd>
                </dl>
            </div>
        </div>
   
        <div class="cao-speak">
            <p>粤网文[2017]6138-1456 号 | 网络视听许可证 1904073 号 | 增值电信业务经营许可证:粤 B2-20090059 | 粤公网安备 44030002000001 号</p>
            <p>关于腾讯 | About Tencent | 服务条款 | 广告服务 | 腾讯招聘 | 客服中心 | 网站导航</p>
            <p>Copyright © 1998 - 2024 Tencent. All Rights Reserved.</p>
            <p>腾讯公司 版权所有</p>
        </div>

    </footer>

    <script>
        // 获取按钮和菜单元素
        const dropdownButton = document.getElementById('dropdownButton');
        const dropdownMenu = document.getElementById('dropdownMenu');

        // 切换菜单显示状态
        dropdownButton.addEventListener('click', (e) => {
            e.stopPropagation();
            dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
        });

        // 点击其他区域关闭菜单
        document.addEventListener('click', () => {
            dropdownMenu.style.display = 'none';
        });

        // 防止点击菜单时关闭
        dropdownMenu.addEventListener('click', (e) => {
            e.stopPropagation();
        });

      
        const item = document.querySelector('.cao-hContent');
        data = [
            {
                img: 'image/3.png',
                name: '永夜星河 第22集',
                progress: '99%',
                label: '独播',
                num: '32'
            },
            {
                img: 'image/现在就出发2.jpg',
                name: '现在就出发 第2季',
                progress: '50%',
                label: '独播',
                num: '25'
            },
            {
                img: 'image/3.png',
                name: '创造营2021 第10期',
                progress: '90%',
                label: 'VIP',
                num: '32'
            },
        ];
        getData();

        function deleteData(index) {
            console.log(index);
            data.splice(index, 1);
            getData();
        }

        function getData() {
            let s = '';
            for (let index in data) {
                s = s + `
                <a class="cao-modle">
                            <img src="${data[index].img}">
                            <p>${data[index].name}</p>
                            <span>观看至${data[index].progress}</span>
                            <div class="cao-tips">
                                <div class="cao-first">${data[index].label}</div>
                                <div class="cao-second">全${data[index].num}集</div>
                            </div>
                            <div class="cao-delete">
                                <img src="image/delete.jpg" alt="" onclick="deleteData(${index})">
                            </div>
                        </a>
                `;
            }
            item.innerHTML = s;
        }

    </script>

</body>

</html>